<h1 mat-dialog-title>{{'BATCH_OPERATION'|translate}}</h1>
<div mat-dialog-content>
  <ng-container *ngIf="!batchJobConfirmed">
    <div style="margin-bottom: 16px;">{{"CHANGE_MSG"|translate}}</div>
    <div style="margin-bottom: 8px;">{{getIds()}}</div>
    <lib-factory [formId]="formId" [formInfo]="formInfo"></lib-factory>
  </ng-container>
  <ng-container *ngIf="batchJobConfirmed">
    <div class="table-container">
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> {{'ID'|translate}} </th>
          <td mat-cell *matCellDef="let row">
            {{row.id}}
          </td>
        </ng-container>
        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef> {{'STATUS'|translate}} </th>
          <td mat-cell *matCellDef="let row">
            <ng-container *ngIf="row.status!=='SUCCESS'&&row.status!=='FAILED'">
              {{row.status|translate}}
            </ng-container>
            <mat-icon *ngIf="row.status==='SUCCESS'" [color]="'primary'">
              check_circle_outline
          </mat-icon>
            <mat-icon *ngIf="row.status==='FAILED'" [color]="'primary'">
              cancel
          </mat-icon>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
  </ng-container>
</div>
<div mat-dialog-actions>
  <button *ngIf="!batchJobConfirmed" mat-button cdkFocusInitial (click)="onNoClick()">{{'CANCEL'|translate}}</button>
  <button *ngIf="!batchJobConfirmed" mat-button (click)="startBatchJob()">{{'CONFIRM'|translate}}</button>
  <button *ngIf="batchJobConfirmed" mat-button (click)="close()">{{'CLOSE'|translate}}</button>
</div>